<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="${base!}/assets/front/h5/css/icons-extra.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        .circle{
            width: 20px;
            height: 20px;
            color: white;
            background-color: #f45768;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            position: absolute;
            left: 60%;
            top: 10%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
        }
        .mui-bar{
            background: #38cecd;
            box-shadow: none;
        }
        .mui-title{
            color: #ffffff;
        }
    </style>
</head>
<body>


<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #ffffff;"></a>
    <p class="mui-title" >
        个人中心
    </p>
</header>

<!--底部导航栏-->
<footer class="mui-bar-new mui-bar-tab-new" >
    <ul class="ful">
        <li>
            <a href="javascript:void(0);" onclick="window.location.href='${base!}/open/h5/niantu/index.html'">
                <img src="${base!}/assets/front/newH5/images/icon1.png" alt="" />
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon2.png" onclick="window.location.href='${base!}/open/h5/cart/shoppingCart.html'" alt="" />
                <span>购物车</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon3.png" alt="" onclick="window.location.href='${base!}/open/h5/coupon/receiveCoupon.html'" />
                <span>领券中心</span>
            </a>
        </li>
        <li class="active">
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon4_active.png" alt="" onclick="window.location.href='${base!}/open/h5/niantu/userCenter.html'" />
                <span>个人中心</span>
            </a>
        </li>
    </ul>
</footer>
<div class="mui-content" style="padding-bottom: 0;background: white;">
    <ul class="mui-table-view mui-grid-view mui-grid-9" style="background: rgb(56,206,204);margin-top: 0px;">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="padding: 0;border:0;">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="padding: 0;border:0; margin-left: 0;">
            <a href="javascript:void(0)" id="upload2">
                <!--#if(isEmpty(info.imageUrl)){#-->
                <img src="${base!}/assets/front/h5/img/man.png" id="touxiang" style="border-radius:50%;border:3px solid #9ce7e6;width: 80px;height: 80px"/>
                <!--#}else{#-->
                <img src="${info.imageUrl!}" id="touxiang" style="border-radius:50%;border:3px solid #9ce7e6;width: 80px;height: 80px"/>
                <!--#}#-->
                <div class="mui-media-body" style="color: white;">${info.nickname!}</div>
            </a>
            <input type="file" onchange="shangchaun(this)" id="choose" accept="image/*" multiple>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="padding: 0;border:0;">
    </ul>
</div>

<div class="mui-content simp_content" style="padding-top: 0px;background: white;" id="vue">
    <ul class="mui-table-view mui-grid-view mui-grid-9 noborder func_list" style="background: white;">
        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" style="padding: 0;margin-left:7%;border: 0; ">
            <a href="${base!}/open/h5/order/goOrderList.html">
                <img src="${base!}/assets/front/h5/img/c1.png" width="62px;"/>
                <div class="mui-media-body">全部订单</div>
            </a>
            <div class="circle" id="cartNum">{{numMap.num}}</div>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" style="padding: 0;margin-left:7%;border: 0; ">
            <a href="${base!}/open/h5/order/goOrderList.html?status=1">
                <img src="${base!}/assets/front/h5/img/c1.png" width="62px;"/>
                <div class="mui-media-body">待付款</div>
            </a>
            <div class="circle" id="cartNum1">{{numMap.num1}}</div>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" style="padding: 0;margin-left:7%;border: 0; ">
            <a href="${base!}/open/h5/order/goOrderList.html?status=2">
                <img src="${base!}/assets/front/h5/img/c2.png" width="62px;"/>
                <div class="mui-media-body">待发货</div>
            </a>
            <div class="circle" id="cartNum2">{{numMap.num2}}</div>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" style="padding: 0;margin-left:7%;border: 0; ">
            <a href="${base!}/open/h5/order/goOrderList.html?status=3">
                <img src="${base!}/assets/front/h5/img/c3.png" width="62px;"/>
                <div class="mui-media-body">待收货</div>
            </a>
            <div class="circle" id="cartNum3">{{numMap.num3}}</div>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" style="padding: 0;margin-left:7%;border: 0; ">
            <a href="${base!}/open/h5/order/goOrderList.html?status=4">
                <img src="${base!}/assets/front/h5/img/c4.png" width="62px;"/>
                <div class="mui-media-body">待评价</div>
            </a>
            <div class="circle" id="cartNum4">{{numMap.num4}}</div>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" style="padding: 0;margin-left:7%;border: 0; ">
            <a href="${base!}/open/h5/order/goOrderList.html?status=5">
                <img src="${base!}/assets/front/h5/img/c5.png" width="62px;"/>
                <div class="mui-media-body">退款售后</div>
            </a>
            <div class="circle" id="cartNum5">{{numMap.num5}}</div>
        </li>
        <!--<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" style="padding: 0;margin-left:7%;border: 0; ">-->
            <!--<a href="${base!}/open/h5/order/goOrderList.html?status=6">-->
                <!--<img src="${base!}/assets/front/h5/img/c5.png" width="62px;"/>-->
                <!--<div class="mui-media-body">全部订单</div>-->
            <!--</a>-->
        <!--</li>-->
    </ul>
</div>

<ul class="mui-table-view user_function">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" href="${base!}/open/h5/integral/myIntegral.html">
            <img width="30" src="${base!}/assets/front/h5/img/cr1.png" />
            <span style="margin-left: 15px;">我的积分</span>
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" href="${base!}/open/h5/cms/goMyVideoList.html">
            <img width="30" src="${base!}/assets/front/h5/img/cr2.png" />
            <span style="margin-left: 15px;">我的视频</span>
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" href="${base!}/open/h5/coupon/goMyCoupon.html">
            <img width="30" src="${base!}/assets/front/h5/img/cr3.png" />
            <span style="margin-left: 15px;">我的优惠劵</span>
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" href="${base!}/open/h5/niantu/talentShow.html?accountId=${accountUser.accountId!}">
            <img width="30" src="${base!}/assets/front/h5/img/cr4.png" />
            <span style="margin-left: 15px;">我的达人秀</span>
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" href="${base!}/open/h5/feedback/goMyFeedback.html">
            <img width="30" src="${base!}/assets/front/h5/img/cr5.png" />
            <span style="margin-left: 15px;">我的评价</span>
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" href="${base!}/open/H5/login/updatePassword.html?mobile=${accountUser.mobile!}">
            <img width="30" src="${base!}/assets/front/h5/img/cr6.png" />
            <span style="margin-left: 15px;">修改密码</span>
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right" href="${base!}/open/H5/login/updateName.html?accountId=${accountUser.accountId!}">
            <img width="30" src="${base!}/assets/front/h5/img/cr7.png" />
            <span style="margin-left: 15px;">修改昵称</span>
        </a>
    </li>

</ul>

<div class="mui-content-padded" style="margin: 10px;margin-top:30px;margin-bottom: 84px">
    <button id='out' class="mui-btn mui-btn-block mui-btn-primary" style="border-color: rgb(206, 56, 56);
    background-color: rgb(206, 56, 56);">退出登录</button>
</div>


<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    $("#out").click(function () {
        window.location.href= '${base!}/open/H5/login/logout.html';
    })

    var vue = new Vue({
        el: '#vue',
        data: {
            numMap: '',
        },
        created:function () {   //实例初始化创建完成执行

            this.getOrderNumMap()     //调用自身方法

        },
        methods:{              //定义封装方法
            //获取列表
            getOrderNumMap:function () {
                var self = this;
                var status = "${status!}";
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/order/getMyOrderCount.html",
                    dataType:"JSON",
                    data:{
                        status:status
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.numMap = d;
                        } else {

                        }
                    }
                });

            }
        },
        filters: {

        },
        watch:{     //监听器
            // carModel:function () {
            //     this.getProvince();
            // }
        }

    })

    var filechooser = document.getElementById("choose");

    $("#upload2").on("click", function() {
        filechooser.click();
    })
    
    function shangchaun(t) {
        var formData = new FormData();
        formData.append("Filedata",t.files[0]);
        $.ajax({
            url: "${base!}/open/file/upload/image",
            type: "POST",
            data: formData,
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            success: function (data) {
                if (data.code == 0) {
                    var imageUrl = data.data;
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/H5/login/updateUserInfo",
                        dataType:"JSON",
                        data:{
                            accountId:'${info.id!}',
                            imageUrl:imageUrl
                        },
                        success:function(data){
                            if (data.code == 0) {
                                alert("上传成功")
                                $("#touxiang").attr("src",imageUrl);
                            } else {
                                //提示
                                layer.open({
                                    content: data.msg
                                    ,skin: 'msg'
                                    ,time: 2 //2秒后自动关闭
                                });
                            }
                        }
                    });

                }else {

                }
            },
            error: function () {
                alert("上传失败！");
                $("#imgWait").hide();
            }
        });
    }

</script>
</body>
</html>
